<template>
  <div>
    <el-row>
      <el-col style="display:flex;align-items: center;margin-bottom:10px;"><div class="border"></div><h3>{{ipManager.title}}</h3></el-col>
    </el-row>
    <el-row class="marginlr50">
        <el-col class="com_font">{{ipManager.text1}}</el-col>
    </el-row>
    <el-row class="marginlr50">
        <el-row class="bluebg">
            <el-col style="display:flex;margin-bottom:10px;color:#409EFF">
                <i class="el-icon-circle-plus pointer" style="margin-top:3px;" @click="showoneDialog"><span style="margin-left:8px">{{ipManager.text2}}</span></i>
                <div style="display:block;margin-top:0px;margin-left:15px">
                    <div style="display:flex" v-for="(item,index) in ipAddrVoList" :key="item.id">
                        <span class="ip_msg_txt">{{item.ip}}</span>
                        <span class="pointer" @click="oneDelete(index)">{{ipManager.delete}}</span>
                    </div>
                </div>
            </el-col>
            <el-col style="display:flex;margin-bottom:10px;color:#409EFF">
                <i class="el-icon-circle-plus pointer" style="margin-top:3px;" @click="showtwoDialog"><span style="margin-left:8px">{{ipManager.text3}}</span></i>
                <div style="display:block;margin-top:0px;margin-left:15px">
                    <div style="display:flex" v-for="(item,index) in ipSegmentVoList" :key="item.id">
                        <span class="ip_msg_txt">{{item.ipSegment}}</span>
                        <span class="pointer"  @click="twoDelete(index)">{{ipManager.delete}}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-col class="com_font top80">{{ipManager.text4}}</el-col>
        <el-col style="margin-top:8px">
            <el-button icon="el-icon-circle-plus" @click="showthreeDialog">{{ipManager.text5}}</el-button>
        </el-col>
    </el-row>

    <el-row class="marginlr50">
        <div style="margin-top:10px;width:100%">
            <div class="tablegreen" style="display:flex" v-if="ipUserVoList.length!=0">
                <span class="ip_msg_txt" style="font-size:15px">{{ipManager.text5}}</span>
            </div>
            <div class="tablewhite" style="display:flex" v-for="(item,index) in ipUserVoList" :key="item.id">
                <span class="ip_msg_txt" style="flex:1">{{item.loginName}}</span>
                <span class="pointer" style="color:#409EFF;width:160px;text-align:center" @click="threeDelete(index)">{{ipManager.delete}}</span>
            </div>          
        </div>
        <el-col class="line"></el-col>
    </el-row>

    <el-row class="marginlr50" style="display:flex;margin-top:15px">
        <el-button type="primary" style="width:120px" @click="btmedit">{{isEdit?ipManager.enter:ipManager.fix}}</el-button>
        <el-button type="info" style="width:120px;margin-left:60px">{{ipManager.cancel}}</el-button>
    </el-row>

    <el-dialog
      :title="ipManager.text2"
      :visible.sync="showOneDialog"
      :center="true"
      width="360px"
      >
      <el-row class="marginlr50" style="display:flex;margin-top:15px;align-items: center;">
        <h3 style="text-align: center">{{ipManager.text2}}</h3>
        <el-input style="width:260px;margin-left:10px" v-model="oneInput" maxlength="20"></el-input>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="oneDialogClick">{{ipManager.enter}}</el-button>
        <el-button  @click="showOneDialog = false">{{ipManager.cancel}}</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="ipManager.text3"
      :visible.sync="showTwoDialog"
      :center="true"
      width="600px"
      >
      <el-row class="marginlr50" style="display:flex;margin-top:15px;align-items: center;">
        <h4 style="text-align: center">{{ipManager.text3}}</h4>
        <el-input style="width:160px;margin-left:10px"  v-model="twoInputLeft" maxlength="15"></el-input>
        <h3 style="margin-left:5px;margin-right:5px">-</h3>
        <el-input style="width:160px;" v-model="twoInputRight" maxlength="15"></el-input>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="twoDialogClick">{{ipManager.enter}}</el-button>
        <el-button  @click="showTwoDialog = false">{{ipManager.cancel}}</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="ipManager.text5"
      :visible.sync="showThreeDialog"
      width="880px"
      class="el-transfer"
      :center="true">
      <el-transfer
        style="text-align: left;display: block;"
        v-model="threeValue"
        :titles="['追加するユーザを下から選択：', 'IPログインに制限されていない ユーザ：']"
        :button-texts="['削除', '追加']"
        :data="threeData">
    </el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="threeDialogClick">{{ipManager.enter}}</el-button>
        <el-button  @click="showThreeDialog = false">{{ipManager.cancel}}</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  export default {
    data:function () {
      return{
        ipManager: this.$t('m.ipManager'),//引入 lang 里面的字符串资源,
        showOneDialog:false,
        showTwoDialog:false,
        showThreeDialog:false,
        isEdit:false,
        oneInput:"",
        twoInputLeft:"",
        twoInputRight:"",
        ipAddrVoList:[],
        ipSegmentVoList:[],
        ipUserVoList:[],
        threeValue:[],
        threeData:[]
      }
    },
    mounted: function () {
        this.getIPInfo();
        this.getAllUser();
    },
    methods:{
      //获取员工列表
      getAllUser(){
        this.$postJson("uac/group/getDeptTreeByGroupId/"+sessionStorage.getItem("groupId"),{
        }).then(res =>{
            if(res.code == 200){
              var userList = [];
              var empVoList = res.result[0].empVoList;
              for(var i=0;i<empVoList.length;i++){
                userList.push({
                  key:empVoList[i].userId,
                  label:empVoList[i].userName
                })
              }
              var subDept = res.result[0].subDept;
              for(var i=0;i<subDept.length;i++){
                for(var j=0;j<subDept[i].empVoList.length;j++){
                  userList.push({
                    key:subDept[i].empVoList[j].userId,
                    label:subDept[i].empVoList[j].userName
                  })
                }
              }
              this.threeData = userList;
            }
        })
      },
      showtwoDialog(){
            if(this.isEdit){
              this.showTwoDialog = true;
              this.twoInputLeft = "";
              this.twoInputRight = "";
            }else{
            this.$message({message:this.ipManager.pleaseEdit,type:"error"});
            }
      },
      showoneDialog(){
            if(this.isEdit){
              this.showOneDialog = true;
              this.oneInput = "";
            }else{
            this.$message({message:this.ipManager.pleaseEdit,type:"error"});
            }
      },
      showthreeDialog(){
            if(this.isEdit){
              this.showThreeDialog = true;
              this.threeValue = [];
              for(var i=0;i<this.ipUserVoList.length;i++){
                this.threeValue.push(
                  this.ipUserVoList[i].userId
                )
              }
            }else{
            this.$message({message:this.ipManager.pleaseEdit,type:"error"});
            }
      },
      btmedit(){
          this.isEdit = !this.isEdit;
      },
      oneDelete(index){
         if(!this.isEdit){
            this.$message({message:this.ipManager.pleaseEdit,type:"error"});
            return;
         }
        this.$confirm(this.$t('m.deleteMessage'), this.$t('m.deleteTitle'), {
          confirmButtonText: this.$t('m.enter'),
          cancelButtonText: this.$t('m.cancel'),
          type: "warning",
          center: true,
          closeOnClickModal: false
        }).then(res =>{
            var ipAddrVoList = [];
            for(var i=0;i<this.ipAddrVoList.length;i++){
              if(i!=index){
                ipAddrVoList.push({
                  ip:this.ipAddrVoList[i].ip,
                  number:i
                })
              }
            }
            var params = {
              ipAddrVoList:ipAddrVoList,
              ipSegmentVoList:this.ipSegmentVoList,
              ipUserVoList:this.ipUserVoList
            }
            this.$postJson("uac/ip/setIpAuth",params).then(res =>{
              if(res.code==200){
                  this.showOneDialog = false;
                  this.$message({message:res.message,type:"success"});
                  this.getIPInfo();
              }else{
                  this.$message({message:res.message,type:"error"});
              }
            })
        }).catch(() => {
        });
      },
      twoDelete(index){
         if(!this.isEdit){
            this.$message({message:this.ipManager.pleaseEdit,type:"error"});
            return;
         }
        this.$confirm(this.$t('m.deleteMessage'), this.$t('m.deleteTitle'), {
          confirmButtonText: this.$t('m.enter'),
          cancelButtonText: this.$t('m.cancel'),
          type: "warning",
          center: true,
          closeOnClickModal: false
        }).then(res =>{          
             var ipSegmentVoList = [];
             for(var i=0;i<this.ipSegmentVoList.length;i++){
               if(i!=index){
                  ipSegmentVoList.push({
                    ipSegment:this.ipSegmentVoList[i].ipSegment,
                    number:i
                  })
               }
             }

            var params = {
              ipAddrVoList:this.ipAddrVoList,
              ipSegmentVoList:ipSegmentVoList,
              ipUserVoList:this.ipUserVoList
            }
            this.$postJson("uac/ip/setIpAuth",params).then(res =>{
              if(res.code==200){
                  this.showOneDialog = false;
                  this.$message({message:res.message,type:"success"});
                  this.getIPInfo();
              }else{
                  this.$message({message:res.message,type:"error"});
              }
            })
        }).catch(() => {
        });
      },
      threeDelete(index){
         if(!this.isEdit){
            this.$message({message:this.ipManager.pleaseEdit,type:"error"});
            return;
         }
        this.$confirm(this.$t('m.deleteMessage'), this.$t('m.deleteTitle'), {
          confirmButtonText: this.$t('m.enter'),
          cancelButtonText: this.$t('m.cancel'),
          type: "warning",
          center: true,
          closeOnClickModal: false
        }).then(res =>{          
             var ipUserVoList = [];
             console.log(this.ipUserVoList);
             for(var i=0;i<this.ipUserVoList.length;i++){
               if(i!=index){
                  ipUserVoList.push({
                    userId:this.ipUserVoList[i].userId,
                    number:i
                  })
               }
             }
            console.log(ipUserVoList);
            var params = {
              ipAddrVoList:this.ipAddrVoList,
              ipSegmentVoList:this.ipSegmentVoList,
              ipUserVoList:ipUserVoList
            }
            this.$postJson("uac/ip/setIpAuth",params).then(res =>{
              if(res.code==200){
                  this.showOneDialog = false;
                  this.$message({message:res.message,type:"success"});
                  this.getIPInfo();
              }else{
                  this.$message({message:res.message,type:"error"});
              }
            })
        }).catch(() => {
        });
      },
      oneDialogClick(){
        //
        var ipAddrVoList = [];
        for(var i=0;i<this.ipAddrVoList.length;i++){
          ipAddrVoList.push({
            ip:this.ipAddrVoList[i].ip,
            number:i
          })
        }
        ipAddrVoList.push({
            ip:this.oneInput,
            number:this.ipAddrVoList.length
        })
        var params = {
          ipAddrVoList:ipAddrVoList,
          ipSegmentVoList:this.ipSegmentVoList,
          ipUserVoList:this.ipUserVoList
        }
        this.$postJson("uac/ip/setIpAuth",params).then(res =>{
          if(res.code==200){
              this.showOneDialog = false;
              this.$message({message:res.message,type:"success"});
              this.getIPInfo();
          }else{
              this.$message({message:res.message,type:"error"});
          }
        })
          
      },
      twoDialogClick(){
        var ipSegmentVoList = [];
        for(var i=0;i<this.ipSegmentVoList.length;i++){
          ipSegmentVoList.push({
            ipSegment:this.ipSegmentVoList[i].ipSegment,
            number:i
          })
        }
        ipSegmentVoList.push({
            ipSegment:this.twoInputLeft+"-"+this.twoInputRight,
            number:this.ipSegmentVoList.length
        })
        console.log(ipSegmentVoList);
        var params = {
          ipAddrVoList:this.ipAddrVoList,
          ipSegmentVoList:ipSegmentVoList,
          ipUserVoList:this.ipUserVoList
        }
        this.$postJson("uac/ip/setIpAuth",params).then(res =>{
          if(res.code==200){
              this.showTwoDialog = false;
              this.$message({message:res.message,type:"success"});
              this.getIPInfo();
          }else{
              this.$message({message:res.message,type:"error"});
          }
        })


      },
      threeDialogClick(){
        var checkList = [];
        for(var j=0;j<this.threeValue.length;j++){
          checkList.push({
            userId:this.threeValue[j],
            number:j
          })
        }
        var params = {
          ipAddrVoList:this.ipAddrVoList,
          ipSegmentVoList:this.ipSegmentVoList,
          ipUserVoList:checkList
        }
        this.$postJson("uac/ip/setIpAuth",params).then(res =>{
          if(res.code==200){
              this.showThreeDialog = false;
              this.$message({message:res.message,type:"success"});
              this.getIPInfo();
          }else{
              this.$message({message:res.message,type:"error"});
          }
        })
      },
      getIPInfo(){
            this.$postForm("uac/ip/getIpAuth",{}).then(res =>{
                this.ipAddrVoList = res.result.ipAddrVoList;
                this.ipSegmentVoList = res.result.ipSegmentVoList;
                this.ipUserVoList = res.result.ipUserVoList;
            })
      }
    }

  }
</script>
<style lang="scss" scoped>
  .border{
    width: 10px;
    height: 30px;
    background: black;
    margin-right: 10px;
  }
  .marginlr50{
   margin: 5px 30px;
  }
  .com_font{
      font-size: 18px;
      color: #333333;
  }
  .top80{
      margin-top: 40px;
  }
  .bluebg{
      background: #ECF5FF;
      border-radius: 10px;
      width: 100%;
      padding: 10px 20px;
  }
  .line{
      margin-top: 40px;
      border-bottom:1px dashed gray;
  }
    .pointer{
        cursor: pointer;
    }
    .ip_msg_txt{
        font-size: 15px;
        color: #222222;
        min-width: 160px;
        margin: 0px 5px;
    }
    .tablewhite{
        border: 1px solid rgb(207, 207, 207);
        background: white;
        border-radius: 5px;
        padding: 5px;
    }
    .tablegreen{
        border: 1px solid #ECF5FF;
        background: #ECF5FF;
        border-radius: 5px;
        padding: 5px;
    }
    .el-transfer /deep/ .el-transfer-panel{
      width: 350px;
    }
    .el-transfer /deep/ .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label{
      font-size: 14px;
    }
    .el-transfer /deep/ .el-checkbox{
      display: block;
    }

    // .el-transfer /deep/ .el-transfer-panel__item.el-checkbox{
    //     display: block;
    // }
</style>
